.cm-scrollable-container {
  flex: 1;
  overflow: auto;
}

.cm-op-btn {
  color: #fff;
  background-color: #0D5BA9;
  font-size: 16px;
  padding: 10px 40px;
  display: inline-block;
}

.cm-modal-wrapper {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  .ant-modal {
    top: 0;
    .ant-modal-content {
      border-radius: 0;
    }
    .ant-modal-header {
      text-align: center;
      background-color: #0D5BA9;
      color: #fff;
      font-size: 20px;
      border-radius: 0;
    }
    .ant-modal-body {
      text-align: center;
      section {
        color: #474E5D;
        font-size: 14px;
        .-question {
          font-size: 16px;
          padding-bottom: 15px;
        }
      }
    }
    .ant-modal-footer {
      border-top: 0;
      text-align: center;
      padding: 0 0 15px;
      button {
        background-color: #ED5E69;
        border-radius: 23px;
        font-size: 16px;
        color: #fff;
        padding: 12px 63px;
        border-color: #ED5E69;
      }
      .ant-btn-primary {
        background-color: #0D5BA9;
        margin-left: 48px;
        border-color: #0D5BA9;
      }
    }
  }
}

.cm-modal-btn {
  padding: 0;
  display: inline-block;
  padding: 12px 63px 11px;
  border-radius: 23px;
  background-color: #D9D9D9;
  font-size: 16px;
  color: #fff;
  user-select: none;
  cursor: pointer;
  margin-top: 14px;
}

.cm-independent-modal-content {
  p {
    font-size: 14px;
    color: #474E5D;
  }
  .-title {
    padding: 23px 0 15px;
    font-size: 16px;
  }
}

.cm-hover-btn {
  background-color: #1AAB8A;
  color: #fff;
  padding: 8*2px 28*2px;
  font-size: 20px;
  user-select: none;
  position: relative;
  transition: all 800ms ease;
  cursor: pointer;
  &:hover {
    background-color: #fff;
    color: #1AAB8A;
    &::before,
    &::after {
      width: 100%;
      transition: all 800ms ease;
    }
  }
  &::before,
  &::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 0; // transition －> 100%
    transition: all 800ms ease;
    background-color: #1AAB8A;
  }
  &::before {
    top: 0;
    right: 0;
  }
  &::after {
    bottom: 0;
    left: 0;
  }
}

.cm-tick-box-wrapper {
  position: relative;
  // display: inline-block; // can change to be inline
  img {
    width: 100px;
    height: 100px;
  }
  .-shade {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: #fff;
    animation: tick 3s;
    top: 0;
  }
}

// 钩号
.cm-tick-box {
  // the color of the border can be changed what you want
  border: 2px solid red;
  border-top-width: 0;
  border-right-width: 0;
  height: 8px;
  width: 20px;
  transform: rotate(-45deg);
  display: inline-block;
  // hide the tick style
  &.cm-tick-box-hide {
    border-color: #fff;
  }
  &.-hide {
    border-color: #fff;
  }
}